<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }

        li {
            width: 180px;
            border: 1px solid green;
            margin-right: 10px;
            margin-bottom: 10px;
            height: 250px;
            display: inline-block;
            vertical-align: top;
        }

        img {
            width: 100%;
            height: 150px;
        }
    </style>
</head>

<body> 
    <ul>
        <!-- <li>
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt="">
            <h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h5>
            <p>￥"17.50</p>
        </li>
        <li>
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt="">
            <h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h5>
            <p>￥"17.50</p>
        </li>
        <li>
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt="">
            <h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h5>
            <p>￥"17.50</p>
        </li>
        <li>
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt="">
            <h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h5>
            <p>￥"17.50</p>
        </li>
        <li>
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt="">
            <h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h5>
            <p>￥"17.50</p>
        </li>
        <li>
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt="">
            <h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h5>
            <p>￥"17.50</p>
        </li>
        <li>
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt="">
            <h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h5>
            <p>￥"17.50</p>
        </li>
        <li>
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt="">
            <h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h5>
            <p>￥"17.50</p>
        </li>
        <li>
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt="">
            <h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h5>
            <p>￥"17.50</p>
        </li>
        <li>
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt="">
            <h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h5>
            <p>￥"17.50</p>
        </li>
        <li>
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt="">
            <h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h5>
            <p>￥"17.50</p>
        </li>
        <li>
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg" alt="">
            <h5>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h5>
            <p>￥"17.50</p>
        </li> -->
    </ul>
</body>

</html>
<script src="./axios.js"></script>
<script>
    var oBtn = document.querySelector("button")
    var oUl = document.querySelector("ul")
    axios({
        method: 'get',
        url: 'http://localhost:8888/goods/list',
        params: {
            current: 3,
            pagesize: 24
        }
    }).then(function (res) {
        var arr = res.data.list;
        console.log(arr);
        
        var str = ''
        for (var i = 0; i < arr.length; i++) {  // console.log(arr[i]);//对象  {img_big_logo:"",price:"12.9"}
            str += ` <li>
                    <a href='detail.html?goodsid=${arr[i].goods_id}'><img src="${arr[i].img_big_logo}" alt="">
                    <h5>${arr[i].title}</h5>
                    <p>￥${arr[i].price}</p></a>
                </li>`
        }
        console.log(str);
        oUl.innerHTML = str;
    })

</script>